<template>
  <view class="chat-page">
    <!-- 消息区域 -->
    <scroll-view
      class="chat-scroll"
      scroll-y
      :scroll-into-view="scrollToView"
    >
      <view v-for="(item, index) in messages" :key="index" :id="'msg' + index">
        
        <!-- 左侧消息（对方） -->
        <view v-if="item.position === 'left'" class="msg-row left">
			
			<image class="avatar" :src="item.teamMember.avatar ? 'https://changban.dianjingkeji.net' + item.teamMember.avatar : 'https://changban.dianjingkeji.net/img/微信图片_20250923172704_692_133.jpg'" mode=""></image>
          <view class="msgbox">
			  <view class="name">
			  	{{item.teamMember.name||''}}{{item.teamMember.role==0?'(领衔专家)':item.teamMember.role==1?'(联席专家)':item.teamMember.role==2?'(主管医生)':item.teamMember.role==3?'(主管护士)':item.teamMember.role==4?'(6X健康教练)':item.teamMember.role==99?'患者':''}}
			  </view>
          	 <view class="msg-bubble left-bubble">{{ item.content }}</view>
          </view>
         
        </view>

        <!-- 右侧消息（自己） -->
        <view v-else class="msg-row right">
          <view class="msg-bubble right-bubble">{{ item.content }}</view>
          <image class="avatar" :src="'https://changban.dianjingkeji.net'+imgurl"></image>
        </view>

      </view>
    </scroll-view>

    <!-- 底部输入框 -->
    <view class="chat-input-box">
      <input
        class="chat-input"
        v-model="inputValue"
        placeholder="请输入内容"
        confirm-type="send"
        @confirm="sendMessage"
      />
      <view class="send-btn" @click="sendMessage">发送</view>
    </view>
  </view>
</template>

<script>
	import {getChatListByTeamId,sendTeamMessage} from '../../utils/api.js'
export default {
  data() {
    return {
		imgurl:'',
      messages: [
       
      ],
      inputValue: '',
      scrollToView: '',
	  id:'',
	  name:''
    }
  },
  onLoad(e) {
	  this.imgurl=uni.getStorageSync('user').dAvatarUrl
	
  	this.id=e.id,
	this.name=e.name
	uni.setNavigationBarTitle({
	   title: e.name
	 })
	 let p={
		 teamId:e.id,
		  phone:uni.getStorageSync('phone')
	 }
	 getChatListByTeamId(p).then(res=>{
		 console.log(res,'这是消息列表')
		 this.messages=res.data.data
	 })
  },
  methods: {
    sendMessage() {
      if (!this.inputValue) return;

      this.messages.push({
        postion: 'right',
        content: this.inputValue
      });
     let p={
		 teamId:this.id,
		 content:this.inputValue,
		 
		   phone:uni.getStorageSync('phone')
		  
		  
	 }
	 sendTeamMessage(p).then(res=>{
		 console.log(res)
	 })
      this.$nextTick(() => {
        this.scrollToBottom();
      });



      this.inputValue = '';
    },

    scrollToBottom() {
      this.scrollToView = 'msg' + (this.messages.length - 1)
    }
  }
}
</script>

<style scoped>
.chat-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #F5F5F5;
}
::-webkit-scrollbar {
  width: 0;
  background: transparent;
}
.chat-scroll {
  min-height: 90vh;
  padding: 20rpx;
  box-sizing: border-box;
  
}

.msg-row {
  display: flex;
  margin-bottom: 20rpx;
  align-items: flex-start;
}

.msg-row.left {
  justify-content: flex-start;
}

.msg-row.right {
  justify-content: flex-end;
  
}

.avatar {
  width: 70rpx;
  height: 70rpx;
  border-radius: 50%;
}
.msgbox{
	width: 70%;
	margin-left: 10rpx;
}
.name{
	font-size: 28rpx;
	color: gray;
	line-height: 2;
}

.msg-bubble {
  max-width: 480rpx;
  padding: 18rpx 28rpx;
  border-radius: 18rpx;
  font-size: 28rpx;
  line-height: 1.4;
}

.left-bubble {
  background: #fff;
 
}

.right-bubble {
  background: #1a4f8a;
  color: #fff;
  margin-right: 20rpx;
}

.chat-input-box {
  display: flex;
  align-items: center;
  background: #fff;
  padding: 14rpx;
  margin-bottom: 20rpx;
  border-top: 1px solid #eee;
}

.chat-input {
  flex: 1;
  background: #f6f6f6;
  border-radius: 8rpx;
  padding: 14rpx;
  font-size: 28rpx;
}

.send-btn {
  margin-left: 20rpx;
  background: #1a4f8a;
  color: #fff;
  border-radius: 8rpx;
  padding: 14rpx 28rpx;
  font-size: 28rpx;
}
</style>
